<!--
    表格展示
-->
<template>
    <scroll-view scroll-y :style="{'height': scrollHeight + 'px'}"
        style="padding: 0;"
        class="column-scroll-view" @scrolltolower="loadmore">
        <view class="column-data">
            <view v-for="item in listData" :key="item.time" class="column-item">
                <view class="column-item-header">
                    <view class="flex align-center">
                        <picker :value="selectIndex" :range="dateOptions" @change="datePickerHandler">
                            <view  @click="setDateOptions(item.time)">{{item.time | dateFormat}}</view>
                        </picker>
                        <view class="icon iconfont icon-arrow-down" style="margin-left: 10rpx"></view>
                    </view>
                    <view class="flex space-between align-center subtitle-color">
                        <text>超标: 12</text>
                        <view class="flex" @click="statisticsHandler(item.time)">
                            <text>统计</text>
                            <view class="icon iconfont icon-arrow-right"></view>
                        </view>
                    </view>
                </view>
                <view class="column-item-body">
                    <view v-for="value in item.children" :key="value.serialId">
                        <view class="flex space-between column-item-content" style="flex: 1">
                            <text>{{value.time}}</text>
                            <text>{{value.value}}</text>
                            <text>{{value.serialId}}</text>
                        </view>
                    </view>
                </view>
            </view>            
            <!-- 加载状态 -->
        </view>
        <view class="load-state" v-show="loadState != 0">
            加载中
        </view>
    </scroll-view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
// 将数字周几转换为中文
function weekHandler(day) {
    let weekList = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '日'
    }
    return weekList[day]
}
export default {
    filters: {
        // 日期选项过滤
        dateFormat(val) {
            let weekday = moment().weekday(0).format('YYYY-MM-DD')
            // 本周标出周几
            if(!moment(val).isBefore(weekday)) {
                let isToday = moment(val).weekday() == moment().weekday() ? true : false
                if(isToday) {
                    return val + '（今天）'
                } else {
                    return val + '（周' + weekHandler(moment(val).weekday() + 1) + '）'
                }
            } else {
                return val
            }
        }
    },
    props: {
        scrollHeight: {
            type: Number,
            default: 0
        },
        current: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            day: '2021-12-30',
            activeDate: '2020-12-12', // 当前查看的日期
            selectIndex: 0 // 当前选择的
        }
    },
    computed: {
        ...mapState('details', {
            dateOptions: 'dateOptions', // 日期选择选项
            listData: 'listData', // 数据
            loadState: 'loadState' // 加载状态
        })
    },
    created() {
        this.$store.dispatch('details/listHandler')
    },
    methods: {
        // 日期选择器
        setDateOptions(time) {
            const list = this.dateOptions
            if(!list.length) {
                this.$store.dispatch('details/setDateOptions')
            }
            console.log(this.selectIndex)
            this.selectIndex = list.findIndex(val => val == time)
        },
        // 选择日期，设置数据为该天的数据
        datePickerHandler(e) {
            const list = this.dateOptions
            let index = e.detail.value
            this.$store.dispatch('details/filterData', list[index])
            this.$nextTick(() => {
                console.log('数据更新，设置滚动')
            })
        },
        // 点击跳转统计
        statisticsHandler(day) {
            console.log('点击统计', day)
        },
        // 滚动到最底部
        // 加载中和到底了不继续处理
        loadmore() {
            if(this.loadState) return
            this.$store.dispatch('details/listHandler')
        }
    }
}
</script>

<style scoped lang="less">
.column-data {
    margin-top: -30rpx 0;
}
.column-item {
    position: relative;
}

.column-item-header {
    background-color: #ededed;
    padding: 24rpx 0;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    > view {
        height: 44rpx;
        line-height: 44rpx;
        &:last-child {
            margin-top: 10rpx;
        }
    }
}
.column-item-body {
    background-color: #fff;
    .column-item-content {
        padding: 10rpx 20rpx;
    }
}
.load-state {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>